import React, { Component, lazy, Suspense } from "react";

import { Route } from "react-router-dom";

import App from "./App";

// import Home from "./Home";
// import About from "./About";

// import Home1 from "./Home1";
// import Home2 from "./Home2";

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));
const Home1 = lazy(() => import("./Home1"));
const Home2 = lazy(() => import("./Home2"));

class Router extends Component {
  render() {
    return (
      <App>
        <Route path="/home">
          <Suspense fallback={<div>loading...</div>}>
            <Home>
              <Route path="/home/home1">
                <Suspense fallback={<div>loading...</div>}>
                  <Home1 />
                </Suspense>
              </Route>
              <Route path="/home/home2">
                <Suspense fallback={<div>loading...</div>}>
                  <Home2 />
                </Suspense>
              </Route>
            </Home>
          </Suspense>
        </Route>
        <Route path="/about">
          <Suspense fallback={<div>loading...</div>}>
            <About />
          </Suspense>
        </Route>
      </App>
    );
  }
}

export default Router;
